var waterfall = { 
    /*确定图片摆放位置*/
    init: function (parent, content,fun) {
        var this_ = this;
        window.onscroll = function() {
            if (this_.checkFlag()) {
                fun();
            }
        }
    },
    setWaterFall:function(parent, content){
         /* 将父级元素下的content全部提取出来*/
        var parentid = document.getElementById(parent);
        var childelement = this.getChildElement(parentid, content);
        /*每张图片的宽度一样，所以我们只需要提取第一张图片的宽度*/
        var imgWidth = childelement[0].offsetWidth;
        var parentWidth = document.getElementById(parent).offsetWidth;
        /*确定每排放的列数*/
        var cols = Math.floor(parentWidth / imgWidth);
        parentid.style.cssText = "width:" + imgWidth * cols + "px;margin:0 auto;padding-bottom:80px";
        /*确定一个存放图片高度的数组*/
        var imgHeightArr = [];
        for (var i = 0; i < childelement.length; i++) {
            if (i < cols) {
                imgHeightArr[i] = childelement[i].offsetHeight;
            } else {
                /*找到每列当中最小的高度，将剩余的图片排列到下方*/
                var minHeight = Math.min.apply(null, imgHeightArr);
                var minIndex = this.getMinHeightLocation(imgHeightArr, minHeight);
                /*使用绝对定位的方法，确定图片的摆放位置*/
                childelement[i].style.position = "absolute";
                childelement[i].style.top = minHeight + "px";
                childelement[i].style.left = childelement[minIndex].offsetLeft + "px";
                imgHeightArr[minIndex] = imgHeightArr[minIndex] + childelement[i].offsetHeight;
                $('#'+parent).css({'height':imgHeightArr[minIndex]});
            }
        }
    },
    /*得到最小高度图片的位置*/
    getMinHeightLocation:function (imgHeightArr, minHeight) {
        for (var i in imgHeightArr) {
            if (imgHeightArr[i] == minHeight) {
                return i;
            }
        }
    },
    /*得到子级元素*/
    getChildElement:function (parent, content) {
        var colArr = [];
        /*将所有元素提取出来，存放到一个数组当中*/
        var allchildelement = parent.getElementsByTagName("*");
        for (var i = 0; i < allchildelement.length; i++) {
            if (allchildelement[i].className == content) {
                colArr.push(allchildelement[i]);
            }
        }
        return colArr;
    },
    /*判断滚动条是否在页面最下端*/
    checkFlag:function () {
        var parentid = document.getElementById("contenter");
        var childelement = this.getChildElement(parentid, "box");
        /*以最下方的图片作为判断依据*/
        var lastElementHeight = childelement[childelement.length - 1].offsetTop;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
        if (lastElementHeight < scrollTop + pageHeight) {
            return true;
        }
    }
}
